<template>
  <div class="user-card h-40 2xl:h-48">
    <div class="flex justify-between">
      <div class="flex items-center p-2">
        <a-avatar :src="avatarMan" :size="48" />
        <div class="ml-3">
          <div class="font-bold text-2xl w-[120px] truncate">{{ empName }}</div>
          <div class="mt-2 text-sm">{{ period }}</div>
        </div>
      </div>
      <div class="text-sm text-right p-2">
        <div>{{ date }}</div>
        <div class="mt-2">{{ todayName }}</div>
      </div>
    </div>
    <a-space class="flex justify-around text-center p-2">
      <template #split>
        <a-divider class="bg-white" type="vertical" />
      </template>
      <div v-if="configCodes.includes('Today_Appointment_Number')">
        <div class="text-2xl font-bold">{{ countList.yyrs || 0 }}</div>
        <div class="text-sm">今日预约</div>
      </div>
      <div v-if="configCodes.includes('Today_Register_Number')">
        <div class="text-2xl font-bold">{{ countList.jrghrc || 0 }}</div>
        <div class="text-sm">今日挂号</div>
      </div>
      <div v-if="configCodes.includes('Today_Surgery_Number')">
        <div class="text-2xl font-bold">{{ countList.jrssl || 0 }}</div>
        <div class="text-sm">今日手术</div>
      </div>
    </a-space>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'
import avatarMan from '@/assets/images/avatar-man.png'
import useUserStore from '@/store/user'

defineProps({
  configCodes: {
    type: Array,
    default: () => []
  }
})
const { empName } = useUserStore()
const date = dayjs().format('YYYY-MM-DD')
const todayName = dayjs().format('dddd')
const period = dayjs().format('A') + '好'
const countList = ref({})
const getRegisterList = async () => {
  const { code, data, msg } = await post('/statistic/appointment')
  if (code !== 0) return message.error(msg)
  countList.value = { ...countList.value, ...data }
}
const getCount = async () => {
  const { code, data = [], msg } = await post('/statistic/surgeryCount')
  if (code !== 0) return message.error(msg)
  if (data.length === 0) return
  countList.value = { ...countList.value, ...data }
}
onMounted(() => {
  getRegisterList()
  getCount()
})
</script>
<style lang="less" scoped>
.user-card {
  position: relative;
  width: 100%;
  padding: 16px;
  color: #fff;
  background-image: url('@/assets/images/user-card-bg.png');
  background-size: cover;
  border-radius: 16px;
}
</style>
